<template>
  <app-header></app-header>
  <div class="content clearfix">
    <!--个人信息-->
    <div class="user-head">
      <div class="user-head-left fl">
        <div class="user-head-img">
          <img src="@/assets/image/user-head.png" alt="" ref="userHeaderImageDom">
            <input type="file" id="file" @change="uploadHeaderImage" accept="image/gif,image/jpeg,image/png" single class="fileul">
          <label for="file" class="file">更改或上传</label>
        </div>
      </div>
      <div class="user-head-right fl">
        <ul class="user-head-name fl">
          <li><b>{{ userinfo.name }}</b></li>
          <li>{{ userinfo.phone }}</li>
          <li>最近登录：{{ userinfo.lastLoginTime }}</li>
        </ul>
        <div class="user-head-money fr">
          <p>可用余额：<span>￥{{ userinfo.availableMoney }}元</span></p>
          <a href="/user/recharge" style="color:red" class="user-head-a2">充值</a>
          <a href="/product/list?type=1" style="color:red" class="user-head-a2">投资</a>
        </div>
      </div>

    </div>
    <!--记录-->
    <div class="user-record-box clearfix">
      <div class="user-record user-record-1">
        <h3 class="user-record-title">最近投资</h3>
        <table align="center" width="388" border="0" cellspacing="0" cellpadding="0">
          <thead class="datail_thead">
          <tr>
            <th>序号</th>
            <th>投资产品</th>
            <th>投资金额</th>
            <th>投资时间</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(bid,index) in bidList" :key="bid.id">
            <td>{{ index + 1 }}</td>
            <td>{{ bid.productName }}</td>
            <td>{{ bid.bidMoney }}</td>
            <td>{{ bid.bidTime }}</td>
          </tr>

          </tbody>
        </table>
        <!--无记录-->
        <p class="user-record-no" v-if="bidList.length === 0">还没有投资记录，请投资：<a href="/product/list?type=1">投资</a></p>
      </div>
      <div class="user-record user-record-2">
        <h3 class="user-record-title">最近充值</h3>
        <table align="center" width="388" border="0" cellspacing="0" cellpadding="0">
          <thead class="datail_thead">
          <tr>
            <th>序号</th>
            <th>充值结果</th>
            <th>充值金额</th>
            <th>充值时间</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(recharge,index) in rechargeList" :key="recharge.id">
            <td>{{ index+1 }}</td>
            <td>{{ recharge.result }}</td>
            <td>{{ recharge.rechargeMoney }}</td>
            <td>{{ recharge.rechargeTime }}</td>
          </tr>
          </tbody>
        </table>
        <!--无记录-->
        <p class="user-record-no">还没有充值记录，请充值：<a href="/user/recharge">充值</a></p>
      </div>
      <div class="user-record user-record-3">
        <h3 class="user-record-title ">最近收益</h3>
        <table align="center" width="388" border="0" cellspacing="0" cellpadding="0">
          <thead class="datail_thead">
          <tr>
            <th>序号</th>
            <th>项目名称</th>
            <th>到期日期</th>
            <th>收益金额</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(income,index) in incomeList" :key="income.id">
            <td>{{ index + 1 }}</td>
            <td>{{ income.productName }}</td>
            <td>{{ income.incomeDate }}</td>
            <td>{{ income.incomeMoney }}</td>
          </tr>
          </tbody>
        </table>
        <!--无记录-->
        <p class="user-record-no" v-if="incomeList.length===0">还没有收益记录</p>
      </div>

    </div>


  </div>

  <AppFooter></AppFooter>
</template>

<script>
import AppHeader from "@/components/AppHeader";
import AppFooter from "@/components/AppFooter";
import {doGet, upload} from "@/utils/request";

export default {
  name: "UserCenterView",
  components: {
    AppHeader,
    AppFooter
  },
  data() {
    return {
      userinfo: {
        id: 0,
        phone: "",
        name: "",
        lastLoginTime: "",
        headerImage: "",
        availableMoney: 0
      },
      bidList: [{
        id: 0,
        productName: "",
        bidTime: "",
        bidMoney: 0
      }],
      rechargeList: [{
        id: 0,
        rechargeMoney: 0,
        rechargeTime: "",
        result: ""
      }],
      incomeList: [{
        id: 0,
        incomeDate: "",
        incomeMoney: 0,
        productName: ""
      }]
    }

  },

  mounted() {
    //获取用户基本信息.
    this.getUserInfo();
    //获取投资记录.
    this.getBidList();
    //查询充值记录.
    this.getRechargeList();
    //查询收益.
    this.getIncomeList();
  },
  methods: {


    //获取用户基本信息.
    getUserInfo() {
      doGet("/user/info").then(resp => {
        if (resp.code === 999) {
          this.userinfo = resp.result;
          if (this.userinfo.headerImage != ''){
            this.$refs.userHeaderImageDom.src=resp.result.headerImage;
          }
        }
      })
    },

    //获取投资列表.
    getBidList() {
      doGet("/bid/more", {pageNo: 1, pageSize: 6}).then(resp => {
        if (resp.code === 999) {
          this.bidList = resp.result;
        }
      })
    },

    //查询充值记录.
    getRechargeList() {
      doGet("/recharge/more", {pageNo: 1, pageSize: 6}).then(resp => {
        if (resp.code === 999) {
          this.rechargeList = resp.result;
        }
      })
    },

    //查询收益.
    getIncomeList() {
      doGet("/income/more", {pageNo: 1, pageSize: 6}).then(resp => {
        if (resp.code === 999) {
          this.incomeList = resp.result;
        }
      })
    },

    //上传头像.
    uploadHeaderImage(e){

     let headerFile =e.target.files[0];
     let form=new FormData();
     form.append("headerFile",headerFile);
     upload("/upload/header",form).then(resp=>{
       if (resp.code === 999){

         this.$refs.userHeaderImageDom.src=resp.result.headerImage;

         alert("resp.url"+resp.result);
       }
     })
    }
  }
}
</script>

<style scoped>
.fileul{
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.file{
  width: 50px;
  height: 50px;
}
.file:hover{
  cursor: pointer;
}
</style>